<template>
  <div style="width: 100%; height: 100vh;display: flex; flex-direction: column;">
    <TableContainer :title="title">
      <template #search="{ searchBoxWidth }">
        <SearchPopover ref="searchPopoverRef" :search-box-width="searchBoxWidth" @search="handleSearch"
          @reset="handleReset">
          <ElForm ref="searchFormRef" :model="searchForm">
            <ElRow :gutter="24">
              <ElCol v-for="item in formOptions" :key="item.label" :span="6">
                <ElFormItem :label="`${item.label}:`" :prop="item.prop">
                  <template v-if="item.prop === 'totalLaborCost'">
                    <div style="display: flex;">
                      <ElInputNumber v-model="searchForm.totalLaborCost[0]" placeholder="请输入" :min="0"
                        controls-position="right" style="width: 45%" />
                      <span style="margin: 0 5px;">至</span>
                      <ElInputNumber v-model="searchForm.totalLaborCost[1]" placeholder="请输入" :min="0"
                        controls-position="right" style="width: 45%" />
                    </div>
                  </template>
                  <template v-else>
                    <ElInput v-model="searchForm[item.prop]" placeholder="请输入" />
                  </template>
                </ElFormItem>
              </ElCol>
            </ElRow>
          </ElForm>
        </SearchPopover>
      </template>
      <template #toolbar>
        <div class="action">
          <div class="action__right">
            <ColumnSettings :init-table-options="initTableOptions" v-model:table-all-options="tableAllOptions" />
          </div>
        </div>
      </template>
      <template #default="{ contentHeight }">
        <ElTable :loading="loading" :max-height="contentHeight" :data="tableData" border style="width: 100%">
          <ElTableColumn v-for="(column, index) in tableOptionsComputed" :key="index" :prop="column.prop"
            :label="column.label" :fixed="column.fixed" width="120" :show-overflow-tooltip="true" />
          <template #empty>
            <ElEmpty description="暂无数据">
              <template #image>
                <SvgIcon icon-class="empty" style="font-size: 37px;" />
              </template>
            </ElEmpty>
          </template>
        </ElTable>
      </template>
      <template #footer>
        <ElPagination v-model:current-page="page" v-model:page-size="pageSize" :total="total"
          layout="total, prev, pager, next, sizes, jumper" />
      </template>
    </TableContainer>
  </div>
</template>

<script setup>
import ColumnSettings from '@/components/ColumnSettings/index.vue'
import TableContainer from '@/components/Container/table-container.vue'
import SearchPopover from '@/components/SearchPopover/index.vue'
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const searchPopoverRef = ref(null)
const searchFormRef = ref(null)

const title = computed(() => {
  const dateStr = route.query.salaryMonth
  const dataName = route.query.dataName
  return `${dataName}${dateStr}人员薪酬数据`
})
const bid = computed(() => route.query.bid)

const searchForm = ref({
  totalLaborCost: [],
  monthlySalaryBid: bid.value,
})
const tableData = ref([
  {
    name: '张三',
    employeeNumber: '001',
    idNumber: '123456789012345678',
    totalLaborCost: 10000,
    grossSalary: 10000,
    pensionPersonal: 1000,
    pensionUnit: 1000,
    pensionTotal: 2000,
    medicalPersonal: 1000,
    medicalUnit: 1000,
    medicalTotal: 2000,
    unemploymentPersonal: 1000,
    unemploymentUnit: 1000,
    unemploymentTotal: 2000,
  }
])
// 筛选表单选项
const formOptions = [
  {
    prop: 'name',
    label: '姓名',
  },
  {
    prop: 'employeeNumber',
    label: '人员编号',
  },
  {
    prop: 'idNumber',
    label: '证件号码',
  },
  {
    prop: 'totalLaborCost',
    label: '总人力成本',
  },
]
const initTableOptions = ref([
  {
    prop: 'name',
    label: '姓名',
    show: true,
    fixed: 'left',
  },
  {
    prop: 'employeeNumber',
    label: '人员编号',
    show: true,
    fixed: false,
  },
  {
    prop: 'idNumber',
    label: '证件号码',
    show: true,
    fixed: false,
  },
  {
    prop: 'totalLaborCost',
    label: '总人力成本',
    show: true,
    fixed: false,
  },
  {
    prop: 'grossSalary',
    label: '应发金额',
    show: true,
    fixed: false,
  },
  {
    prop: 'pensionPersonal',
    label: '养老(个人)',
    show: true,
    fixed: false,
  },
  {
    prop: 'pensionUnit',
    label: '养老(企业)',
    show: true,
    fixed: false,
  },
  {
    prop: 'pensionTotal',
    label: '养老(合计)',
    show: true,
    fixed: false,
  },
  {
    prop: 'medicalPersonal',
    label: '医疗(个人)',
    show: true,
    fixed: false,
  },
  {
    prop: 'medicalUnit',
    label: '医疗(企业)',
    show: true,
    fixed: false,
  },
  {
    prop: 'medicalTotal',
    label: '医疗(合计)',
    show: true,
    fixed: false,
  },
  {
    prop: 'unemploymentPersonal',
    label: '失业(个人)',
    show: false,
    fixed: false,
  },
  {
    prop: 'unemploymentUnit',
    label: '失业(企业)',
    show: true,
    fixed: false,
  },
  {
    prop: 'unemploymentTotal',
    label: '失业(合计)',
    show: true,
    fixed: false,
  },
  {
    prop: 'workRelatedUnit',
    label: '工伤(企业/合计)',
    show: true,
    fixed: false,
  },
  {
    prop: 'housingFundPersonal',
    label: '公积金(个人)',
    show: true,
    fixed: false,
  },
  {
    prop: 'housingFundUnit',
    label: '公积金(企业)',
    show: true,
    fixed: false,
  },
  {
    prop: 'housingFundTotal',
    label: '公积金(合计)',
    show: true,
    fixed: false,
  },
  {
    prop: 'annuityPersonal',
    label: '年金(个人)',
    show: true,
    fixed: false,
  },
  {
    prop: 'annuityUnit',
    label: '年金(企业)',
    show: true,
    fixed: false,
  },
  {
    prop: 'annuityTotal',
    label: '年金(合计)',
    show: true,
    fixed: false,
  },
])
const tableAllOptions = ref(JSON.parse(JSON.stringify(initTableOptions.value)))
const tableOptionsComputed = computed(() => {
  return tableAllOptions.value.filter(item => item.show === true)
})
</script>

<style scoped lang="scss">
.action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

:deep(.el-pager li.is-active) {
  border: 1px solid;
  border-radius: 6px;
}
</style>
